<template>
	<div class="asset" ref="asset">
		<component-header :title="title" :show-date="showDate" :path="path" :time="selectedTimeIndex" :page="page"></component-header>

		<profit :time="selectedTimeIndex" :total-profit="totalProfit">
			<ul class="timePick">
				<li v-for="item,index in times" :class="{'active':index==selectedTimeIndex}" @click="chooseTime(item,index)" v-text="item.text"></li>
			</ul>
		</profit>

		<return-rate :time="selectedTimeIndex"></return-rate>
		<my-asset :fathertime="selectedTimeIndex" :asset-data="assetData" :status="assetStatus"></my-asset>
		<pro-analysis :fathertime="selectedTimeIndex"></pro-analysis>
  		<router-link :to="{path:'/pages/Stock',query:{status:'1'}}" @click.native='skip()'>
	    	<div class="bottom">
	      		全部持仓盈亏状况
	      		<img src="../../assets/images/arrow2x.png" alt="" />
    		</div>
	  	</router-link>

		<my-label :fathertime="selectedTimeIndex"></my-label>
		<stock-ope :fathertime="selectedTimeIndex" class="showBottom"></stock-ope>
		<component-footer :page="page"></component-footer>
	</div>
</template>

<script>
	import Header from '@/components/Header'
	import Footer from '@/components/Footer'
	import Profit from './asset/Profit'
	import ReturnRate from './asset/ReturnRate'
	import MyAsset from './asset/MyAsset'
	import ProAnalysis from './asset/ProAnalysis'
	import MyLabel from './asset/MyLabel'
	import StockOpe from './asset/StockOpe'
	import RemoteDAO from '@/common/remoteDAO'
	import constant from '@/common/constant'
  	import { mapState } from 'vuex'
  	import Jquery from 'jquery'

	export default{
		data () {
			return {
				page:0,
				title:'资产分析',
				showDate:true,
				path:'/pages/Asset',
				selectedTimeIndex: null,
				times:constant.TimeTabData,
				totalProfit: '',
				assetData: [],
				assetStatus: 'exhibition',
				timeEvent: ['002007', '002008', '002009', '002010'],
				timeNum:0
			}
		},
		created () {
			this.selectedTimeIndex = this.$store.state.selectedTime;
		},
		mounted () {
			TDAPP.onEvent('002027','');
			TDAPP.send();

			this.fetchData()
		},
		beforeDestroy(){
			window.removeEventListener('scroll',this.scrollFunction)
		},
		methods:{
			skip() {
		      TDAPP.onEvent('002015', '');
		      TDAPP.send();
		    },
			chooseTime(item,index){
				if(this.timeNum != index){
					TDAPP.onEvent(this.timeEvent[index],'');
					TDAPP.send();
				}
				this.timeNum=index

				this.selectedTimeIndex = index;

				this.$store.dispatch('setSelectedTime', index);

				this.$nextTick(function(){
					this.fetchData();
				})
			},
			fetchData () {
				this.callZL13100007();
			},
			callZL13100007 () {
				RemoteDAO.callZL13100007({
					"pagenum": constant.TimeTabData[this.selectedTimeIndex].num,
					"recent": constant.TimeTabData[this.selectedTimeIndex].name
				}, (result) => {
					if(result.error!='1'){
						let data=result.data;
						let bigdata=JSON.parse(data).body[0].bigdata;
						let specData=JSON.parse(bigdata).hits.hits;
						if(specData.length>0){
							this.assetStatus = 'exhibition';
							this.totalProfit=specData[0]._source.total_profit_total.toFixed(2);
							this.assetData = Array.from([
								specData[0]._source.net_asset_total_begin,
								specData[0]._source.trans_in_amt_total,
								specData[0]._source.trans_out_amt_total,
								specData[0]._source.net_asset_total_avg,
								specData[0]._source.net_asset_total_end
							])
						} else {
							this.assetStatus = 'empty';
						}
					} else {
						this.assetStatus = 'error';
					}
				});
			}
		},
		components:{
			'component-header':Header,
			'component-footer':Footer,
			'profit':Profit,
			'return-rate':ReturnRate,
			'my-asset':MyAsset,
			'pro-analysis':ProAnalysis,
			'my-label':MyLabel,
			'stock-ope':StockOpe
		}
	}
</script>

<style scoped>
	.asset{
		background: #fff;
		padding-bottom: 0.5rem;
	}

	.timePick {
		height: 0.39rem;
		border-bottom: 1px solid #eee;
		box-shadow: 0 2px 6px 0 rgba(34, 34, 34, 0.1);
		font-size: 0.14rem;
		padding: 0 0.05rem;
		color: #555;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		background: #fff;
		width: 100%;
	}

	.timePick li {
		height: 0.39rem;
		line-height: 0.39rem;
		padding: 0 0.11rem;
	}

	.timePick .active {
		color: #309fea;
		border-bottom: 4px solid #309fea;
		box-sizing: border-box;
	}

	.bottom {
	  width: 100%;
	  height: 0.39rem;
	  border-top: 1px solid #ddd;
	  border-bottom: 1px solid #ddd;
	  font-size: 0.12rem;
	  line-height: 0.39rem;
	  text-align: right;
	  margin-top: 0.15rem;
	  margin-right: 0.27rem;
	  color: #309fea;
	}

	.bottom img {
	  display: inline-block;
	  width: 0.2rem;
	  height: 0.2rem;
	  vertical-align: middle;
	  margin-bottom: 0.015rem;
	  margin-right: 0.1rem;
	}

	.showBottom{
		padding-bottom: 0.5rem;
	}
</style>
